<template>
  <div style="width: 900px;height:800px;margin-top: 30px;margin-left: 15px;">
    <el-divider><p style="font-family:方正粗黑宋简体;color:red;font-size:20px;">用户观影量Top9</p></el-divider>
    <div style="height:800px ;width:900px ;">
      <div style="width: 900px;height:300px;">
        <div id="chart" style="width: 480px;height:300px;float:left;margin: 0px;"></div>
        <div id="chart2" style="width: 400px;height:300px; float:right;margin: 0px;"></div>
      </div>
      <el-divider><p style="font-family:楷体;color:red;font-size:20px;">Top5年度热度数据变化</p></el-divider>
      <div style="width: 900px;height:500px;">
        <div  id="chart1" style="width:480px; height:350px ; float:left;margin: 0px"></div>
        <div  style="width: 400px;height:300px; float: right;margin: 0px">
          <el-divider><p style="font-family:方正粗黑宋简体;color:coral;font-size:20px">电影热度冠军</p></el-divider>
          <div style="width: 400px;height:450px; float: right;margin: 0px">
            <div><img src="@/assets/2.1.png" style="width:390px;height: 300px">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "charts",
    mounted() {
      var dom2 = document.getElementById('chart2');
      var chart = this.$echarts.init(dom2);
      var option2 = {
        dataset: [{
          dimensions: ['name', 'age', 'profession', 'score', 'date'],
          source: [
            [' 《锦衣之下》 ', 41, 'Engineer', 314, '2011-02-12'],
            ['《快把我哥带走》 ', 20, 'Teacher', 351, '2011-03-01'],
            [' 《最好的我们》 ', 52, 'Musician', 287, '2011-02-14'],
            ['《都挺好》', 37, 'Teacher', 219, '2011-02-18'],
            [' 《庆余年》 ', 25, 'Engineer', 253, '2011-04-02'],
            [' 《赘婿》', 19, 'Teacher', null, '2011-01-16'],
            ['《流金岁月》', 71, 'Engineer', 165, '2011-03-19'],
            [' 《仙剑奇侠传3》', 36, 'Musician', 318, '2011-02-24'],
            ['《小欢喜》 ', 67, 'Engineer', 366, '2011-03-12'],
          ]
        }, {
          transform: {
            type: 'sort',
            config: { dimension: 'score', order: 'desc' }
          }
        }],
        xAxis: {
          type: 'category',
          axisLabel: { interval: 0, rotate: 30 },
        },
        yAxis: {},
        series: {
          type: 'bar',
          encode: { x: 'name', y: 'score' },
          datasetIndex: 1
        }
      };

      chart.setOption(option2);
      var dom = document.getElementById('chart');
      var chart = this.$echarts.init(dom);
      var option = {
        dataset: {
          source: [
            ['score', '观看量(千万)', 'product'],
            [89.3, 58212, '侏罗纪世界'],
            [57.1, 78254, '《复仇者联盟3》'],
            [74.4, 41032, '复仇者联盟'],
            [50.1, 12755, '复仇者联盟2:奥创纪元'],
            [89.7, 20145, '速度与激情7'],
            [68.1, 79146, '《星球大战7》'],
            [19.6, 91852, '《泰坦尼克号》'],
            [10.6, 101852, '《阿凡达》'],
            [32.7, 20112, '猫鼠游戏'],
            [50.1, 12755, '复仇者联盟2:奥创纪元']
          ]
        },
        grid: {containLabel: true},
        xAxis: {name: '观看量(千万)'},
        yAxis: {type: 'category'},
        visualMap: {
          orient: 'horizontal',
          left: 'center',
          min: 10,
          max: 100,
          text: ['High Score', 'Low Score'],
          // Map the score column to color
          dimension: 0,
          inRange: {
            color: ['#65B581', '#FFCE34', '#FD665F']
          }
        },
        series: [
          {
            type: 'bar',
            encode: {
              x: '观看量(千万)',
              y: 'product'
            }
          }
        ]
      };
      chart.setOption(option);
      var dom1 = document.getElementById('chart1');
      var chart = this.$echarts.init(dom1);
      var option1 = {
        title: {
          text: '万/年'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['《侏罗纪世界》', '《复仇者联盟3》', '《星球大战7》', '《泰坦尼克号》', '《阿凡达》']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['2014', '2015', '2016', '2017', '2018', '2019', '2020']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '《侏罗纪世界》',
            type: 'line',
            stack: '总量',
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: '《复仇者联盟3》',
            type: 'line',
            stack: '总量',
            data: [220, 182, 191, 234, 290, 330, 310]
          },
          {
            name: '《星球大战7》',
            type: 'line',
            stack: '总量',
            data: [150, 232, 201, 154, 190, 330, 410]
          },
          {
            name: '《泰坦尼克号》',
            type: 'line',
            stack: '总量',
            data: [320, 332, 301, 334, 390, 330, 320]
          },
          {
            name: '《阿凡达》',
            type: 'line',
            stack: '总量',
            data: [820, 932, 901, 934, 1290, 1330, 1320]
          }
        ]
      };
      chart.setOption(option1);
    }
  }
</script>

<style scoped>
</style>
